<template>
    <div>
        <div class="flex row" style="margin-bottom:20px">
            <el-button type="danger" round @click="toAdd()"><i class="el-icon-plus"></i>新建企业用户</el-button>
        </div>
        
        <el-table :data="tableData" border style="width: 100%"  ref="multipleTable" >
            <el-table-column prop="userName" label="企业用户名称" width=""></el-table-column>

            <el-table-column prop="phoneNo" label="联系方式" width=""></el-table-column>

            
            
            <el-table-column  label="操作" width="110">
                <template slot-scope="scope">
                    <div class="flex row" style="justify-content: space-between;display: flex;">
                    <div style="justify-content: space-between;display: flex;"> 
                        <p  @click.stop="updateData(scope.row.Id)" style="cursor:pointer;">
                        查看印章
                        </p>
                        
                    </div>
                    <p style="cursor:pointer;" @click.stop="updateuser(scope.row.signerId)">修改</p>
                    </div>
                </template>
            </el-table-column>

        </el-table>

        <div class="block flex">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[20,50,100]" :page-size="numPage"  layout="total, sizes, prev, pager, next, jumper" :total="total1">
            </el-pagination>
        </div>

        <el-dialog  :visible.sync="dialogFormVisible1" :append-to-body='true' top="300px" width="800px"> 
                <div class="dialogFormVisible_box">

                    <div class="flex row margin_t">
                        <p class="flex_title">企业名称</p>
                    
                        <input type="text" class="this_input" v-model="userName">
                    
                    </div>


                    <!-- <div class="flex row margin_t">
                        
                        <p class="flex_title">手机号地区</p>
                    
                        <el-select v-model="phoneRegion" placeholder="请选择" class="el-select2 el-num">
                            <el-option
                                label=" 大陆"
                                value="0">
                            </el-option>
                            <el-option
                                label=" 香港、澳门"
                                value="1">
                            </el-option>
                            <el-option
                                label=" 台湾"
                                value="2">
                            </el-option>
                        </el-select>
                    
                    </div> -->

                    <div class="flex row margin_t">
                        <p class="flex_title">企业手机号</p>
                    
                        <input type="text" class="this_input" v-model="phoneNo">
                    
                    </div>
                </div>
        
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="addpartyName()">确 定</el-button>
                </div>

                <div slot="title" class="dialog-title">
                <div class="dialogFormVisivleHeader_left flex">修改用户信息</div>
                
            </div>
        </el-dialog>

        <el-dialog  :visible.sync="dialogFormVisible2" :append-to-body='true' top="300px" width="800px"> 
                <div class="dialogFormVisible_box">

                    <div class="flex row margin_t">
                        <p class="flex_title">企业名称</p>
                    
                        <input type="text" class="this_input" v-model="userName2">
                    
                    </div>

                    <div class="flex row margin_t">
                        <p class="flex_title">企业手机号</p>
                    
                        <input type="text" class="this_input" v-model="phoneNo2">
                    
                    </div>


                    <div class="flex row margin_t">
                        
                        <p class="flex_title">企业相关证件类型</p>
                    
                        <el-select v-model="certifyType" placeholder="请选择" class="el-select2 el-num">
                            <el-option
                                label="组织机构代码"
                                value="3">
                            </el-option>
                            <el-option
                                label="社会信用代码"
                                value="1">
                            </el-option>
                            <el-option
                                label="营业执照注册号"
                                value="2">
                            </el-option>
                        </el-select>
                    
                    </div>

                    <div class="flex row margin_t">
                        <p class="flex_title">企业认证号码</p>
                    
                        <input type="text" class="this_input" v-model="certifyNum">
                    
                    </div>

                    
                </div>
        
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="addpartyName2()">确 定</el-button>
                </div>

                <div slot="title" class="dialog-title">
                <div class="dialogFormVisivleHeader_left flex">修改用户信息</div>
                
            </div>
        </el-dialog>

    </div>
</template>
<script>
import qs from 'qs';
export default {
    props: {
      className: {
        type: String,
        default: 'echartDiv'
      },
      id: {
        type: String,
        default: 'yourID'
      },
      width: {
        type: String,
        default: '850px'
      },
      height: {
        type: String,
        default: '500px'
      }
    },
    data(){
        return{
            tableData:[],
            numPage:20,
            currentPage:1,
            total1:0,

            dialogFormVisible1:false,
            listid:"",
            phoneNo:'',
            phoneRegion:'',
            userName:'',

            dialogFormVisible2:false,
            certifyNum:'',
            phoneNo2:'',
            userName2:'',
            certifyType:''

        }
    },
    created(){
        this.userinfo()
    },
    mounted(){
      
      
    },
    beforeDestroy() {
         
    },
    methods:{
      userinfo(){
          this.$http.post('/yongxu/Signatures/getEnterpriseuser',qs.stringify({
                Display_Page_Number: this.numPage,
                PageNumber: this.currentPage,
            })).then((res)=>{
               this.tableData = res.data.mapList
                
            }).catch((err)=>{
                this.$message({
                    message:'服务器异常',
                    type:'warning'
                });
            })
      },

      handleSizeChange:function(val) {
         this.numPage = val

         this.userinfo()
      },
       handleCurrentChange:function(val) {
        this.currentPage = val
        this.userinfo()
      },
      updateData(id){
          this.$router.push({path:`/index/contractoutIndex/sealuserinfo?id=${id}`})
      },
      updateuser(id){
          this.dialogFormVisible1 = true
          this.listid = id
      },

      addpartyName(){
            this.$http.post('/yongxu/Signatures/companyNameAndPhone',qs.stringify({
                signerId: this.listid,
                userName: this.userName,
                // phoneRegion: this.phoneRegion,
                phoneNo: this.phoneNo,
            })).then((res)=>{
                console.log(res)
               if(res.data.sign == 200){
                   this.$message({
                        message:res.data.msg,
                        type:'success'
                    });
                   this.dialogFormVisible1 = false
                   this.userinfo()
               }else{
                   this.$message({
                        message:res.data.msg,
                        type:'warning'
                    });
               }
                
            })
      },

      toAdd(){
          this.dialogFormVisible2 = true
      },
      addpartyName2(){
        //   console.log(this.phoneNo2)
        //   console.log(this.userName2)
        //   console.log(this.certifyType)
        //   console.log(this.certifyNum)
          this.$http.post('/yongxu/Signatures/addEnterpriseuser',qs.stringify({
                phoneNo: this.phoneNo2,
                userName: this.userName2,
                certifyType:this.certifyType,
                certifyNum: this.certifyNum,
            })).then((res)=>{
                console.log(res)
               if(res.data.sign == 200){
                   this.$message({
                        message:res.data.msg,
                        type:'success'
                    });
                   this.dialogFormVisible2 = false
                   this.userinfo()
               }else{
                   this.$message({
                        message:res.data.msg,
                        type:'warning'
                    });
               }
                
            })
      }


      
    } 
}
</script>
<style>

.case-child-end2{
  margin-bottom:20px;
}
.el-num{
    width: 500px!important;
}
.el-num input{
    height: 45px;
}
</style>


